<template>
    <div class="app-container pull-height">
        <el-container>
            <el-header>
                <div style="display: flex;justify-content: flex-start;">
                    <el-button type="text">销售定价</el-button>
                </div>
            </el-header>
            <el-main>
                <!-- 商品表格展示 -->
                <el-table ref="multipleTable" :data="goodsList" height="500" tooltip-effect="dark" style="width: 100%">
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px"
                                :src="'http://localhost:8092/' + scope.row.picture">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名">
                    </el-table-column>
                    <el-table-column prop="goodsNumber" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="meteriType" label="材质">
                    </el-table-column>
                    <el-table-column label="产品线">
                        <template slot-scope="scope">{{ scope.row.area }}{{ scope.row.producter }}</template>
                    </el-table-column>
                    <el-table-column prop="categoryType" label="品类" width="70px">
                    </el-table-column>
                    <el-table-column prop="unit_price" label="单价" width="70px">
                    </el-table-column>
                    <el-table-column label="状态" width="70px">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.status == 3">待定价</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="日期" :formatter="formatDate">
                        <!-- <template slot-scope="scope">{{ scope.row.time}}</template> -->
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  v-if="role === 'manager'||(sid === '6' &&  end === 'm' )" size="mini" @click="pricing(scope.$index, scope.row.id)">定价</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
                <el-dialog title="定价" :visible.sync="dialogFormVisible">
                    <el-input v-model="unitPrice" placeholder="单价"></el-input>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="pricingCencal">取 消</el-button>
                        <el-button type="primary" @click="pricingAffirm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage: 1,//当前页
            pageSize: 10,//每页大小
            totalPage: 1,//总页数
            total: 1,
            goodsList: [],
            unitPrice: "",//单价
            dialogFormVisible: false,
            id: 0,
            //用户信息
            userAll:{},
            role: "",
            sid:"",
            end:"",//用户名最后一位

        }
    },
    mounted: function () {
        this.selectPage03()
        //根据用户名获取所有用户信息
        this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
            console.log("用户信息");
        console.log(res.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
        this.sid = res.data.data.sid
        console.log(this.sid);
        let a = this.role.length
        this.end = this.role.substring(a-1,a)
        console.log(this.end);
      });
    },
    methods: {
        formatDate(row, column) {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
              return null
          }
          let dt = new Date(data)
          return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
        },
        selectPage03: function () {
            let a = {
                currentPage: this.currentPage,
                size: this.pageSize
            }
            // 发送请求查状态等于3的商品
            this.$axios.post("goods/selectPage03", a).then(res => {
                console.log(res.data);
                // 保存菜单
                this.goodsList = res.data.data.records
                this.currentPage = res.data.data.current
                this.pageSize = res.data.data.size
                this.total = res.data.data.total
                this.totalPage = res.data.data.pages
            })
        },
        pricing: function (index, id) {
            this.dialogFormVisible = true
            this.id = id
        },
        pricingCencal:function(){
            this.dialogFormVisible = false
                    this.unitPrice = false
                    this.id = 0
        },
        pricingAffirm: function () {
            this.$axios.get("goods/pricingById/" + this.id + "/" + this.unitPrice).then(res => {
                if (res.data.data = true) {
                    this.$message.success("修改成功");
                    this.dialogFormVisible = false
                    this.unitPrice = ""
                    this.selectPage03()
                } else {
                    this.$message.error("修改失败");
                }

            })
        },
        //改变每页大小
        handleSizeChange(val) {
            this.pageSize = val
            this.selectPage03()
        },
        //改变当前页
        handleCurrentChange(val) {
            this.currentPage = val
            this.selectPage03()
        },
    }
}
</script>
<style scoped></style>
